<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        [v-cloak]{
            display: none;
        }
        .title{
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        /* no1 */
        /* 显示到隐藏 */
        .no1-leave{
            margin-left:0px;
            opacity: 1;
        }
        .no1-leave-active{
            transition: all .8s;
        }
        .no1-leave-to{
            margin-left: 500px;
            opacity: 0;
        }
        /* 隐藏到显示 */
        .no1-enter{
            margin-left: -500px;
            opacity: 0;
        }
        .no1-enter-active{
            transition: all .8s;
        }
        .no1-enter-to{
            margin-left: 0px;
            opacity: 1;
        }
        /* no2 */
        /* 显示到隐藏 */
        .no2-leave{
            margin-left:0px;
            opacity: 1;
        }
        .no2-leave-active{
            transition: all .8s;
        }
        .no2-leave-to{
            margin-left: -500px;
            opacity: 0;
        }
        /* 隐藏到显示 */
        .no2-enter{
            margin-left: 500px;
            opacity: 0;
        }
        .no2-enter-active{
            transition: all .8s;
        }
        .no2-enter-to{
            margin-left: 0px;
            opacity: 1;
        }

    </style>
</head>
<body>
    <div id="box" v-cloak>
        <div style="width: 500px;height: 350px;border:1px solid black;margin: 30px auto;">
            <div style="height: 50px;line-height: 50px;width: 100%;">
                <div class="title" v-for='(i,$index) in arr' :style="{color:$index==index?'red':''}" @click="index=$index">
                    {{i.title}}
                </div>
            </div>
            <div style="width: 500px;height: 300px;position: relative;">
                <transition v-for="(i,$index) in arr" :name="type">
                    <div style="text-align: center;line-height: 300px;width: 100%;position: absolute;" v-show="$index==index">
                        {{i.content}}
                    </div>
                </transition>
            </div>
        </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            arr:[
                {title:'标题一',content:'内容一'},
                {title:'标题二',content:'内容二'},
                {title:'标题三',content:'内容三'},
                {title:'标题四',content:'内容四'},
                {title:'标题五',content:'内容五'},
            ],
            index:0,
            type:'no2',
        },
        watch:{
            index(a,b){
                if(a>b){
                    this.type='no2'
                }else{
                    this.type='no1'
                }
            }
        }
    })
</script>
</html>